<template>

	<view class="coupon-center">
		 <navigator class="back-arrow" open-type="navigateBack">
		      <view class="arrow"></view>
		  </navigator> 
	    <text class="title">领券中心</text>
	</view>
	
	
	 <!-- 领券中心详情列表 -->
	   <view class="coupon-list">
	     <view class="coupon-container" v-for="(coupon, index) in coupons" :key="index">
	       <!-- 左侧部分：优惠券信息 -->
	       <view class="left-side">
	         <view class="amount">￥{{ coupon.amount }}</view>
	         <view class="condition">{{ coupon.condition }}</view>
	       </view>
	 
	       <!-- 中间竖杠 -->
	       <view class="view-divider"></view>
	 
	       <!-- 右侧部分：其他信息 -->
	       <view class="right-side">
	         <!-- 通用/加油站信息 -->
	         <view class="usage">{{ coupon.usage }}</view>
	 
	         <!-- 有效期信息和领取按钮 -->
	         <view class="bottom-row">
	           <view class="expiry-date">{{ coupon.expiry }}</view>
	           <view class="receive-btn" @click="receiveCoupon(index)">领取</view>
	         </view>
	       </view>
	     </view>
		 
		 
		 <!-- 折扣券 -->
		<!-- 折扣券列表 -->
		    <view class="coupon-container" v-for="(coupon, index) in discountCoupons" :key="'fullcut-' + index">
		      <view class="left-side">
		        <view class="discount">{{ coupon.discount }}</view>
		      </view>
		      <view class="view-divider"></view>
		      <view class="right-side">
		        <view class="usage">{{ coupon.usage }}</view>
		        <view class="bottom-row">
		          <view class="expiry-date">{{ coupon.expiry }}</view>
		          <view class="receive-btn" @click="receiveDiscountCoupon(index)">领取</view>
		        </view>
		      </view>
		    </view>
		 
	   </view>
		 
	
	
	  
	  
</template>

<script setup>
	
	import { ref } from "vue";
	
	// 模拟优惠券数据
	const coupons = ref([
	  { amount: 10, condition: "满200元可用", usage: "通用/仅限XX加油站", expiry: "2024.04.11至2024.05.11" },
	  { amount: 20, condition: "满300元可用", usage: "通用/仅限XX加油站", expiry: "2024.03.01至2024.04.01" }
	]);
	
	// 模拟折扣券数据
	const discountCoupons = ref([
	  { discount: "9折", usage: "通用/仅限XX加油站", expiry: "2024.05.01至2024.06.01" },
	  { discount: "8.5折", usage: "通用/仅限XX加油站", expiry: "2024.03.15至2024.04.15" },
	  
	]);
	
	// 领取满减券
	const receiveCoupon = (index) => {
	  console.log(`领取满减券：`, coupons.value[index]);
	  uni.showToast({ title: "领取成功！", icon: "success" });
	  // 领取后跳转到我的优惠券
	  uni.navigateTo({
	  	url:"/packageMy/myCoupon/myCoupon"
	  })
	};
	
	// 领取折扣券
	const receiveDiscountCoupon = (index) => {
	  console.log(`领取折扣券：`, discountCoupons.value[index]);
	  uni.showToast({ title: "领取成功！", icon: "success" });
	  // 领取后跳转到我的优惠券
	  uni.navigateTo({
	  	url:"/packageMy/myCoupon/myCoupon"
	  })
	};
	
	
</script>

<style scoped>
	
	
	     
		 .coupon-center {
		     display: flex;
		     justify-content: center;
		     align-items: center; /* 调整对齐方式，让内容靠近顶部 */
		     height: 10vh;
			 background-color: #F8F8F8;
			 margin-bottom: 20rpx;
			 position: fixed; /* 固定在顶部 */
			 z-index: 1000; /* 确保在其他内容上方 */
			 top: 0;
			 left: 0;
			 width: 100%;
		   }
		   
		   .back-arrow {
			   position: relative;
		       display: flex;
		       align-items: center;
		       justify-content: center;
		       cursor: pointer;
		     /*  margin-right: 10px; */
			   left: -250rpx;
		     }
		   
		     .arrow {
		       width: 10px;
		       height: 10px;
		       border-top: 2px solid black;
		       border-right: 2px solid black;
		       transform: rotate(-135deg);
			    margin-top: 2vh;
		     }
		 
		   .title {
		     font-size: 20px;
		     font-weight: normal;
		     color: black;
			 margin-top: 2vh; /* 向上移动标题，减少底部空间 */
		   }
		   
		   .coupon-list{
			margin-top: 10vh; /* 让内容从头部下方开始 */
		   }
		   
		   /* 中间的竖杠 */
		   .view-divider {
		     width: 2rpx;
		     height: 140rpx; /* 根据父容器的高度来设置竖杠的高度 */
		     background-color: #BBBBBB; /* 竖杠的颜色 */
		     margin-top: 46rpx ;  /* 给竖杠两边留一些间距 */
		   }
		   
		   
		 /*  ///////////////// */
		   
		   
		   .coupon-container {
			   width: 710rpx;
			   height: 220rpx;
			   margin-left: 24rpx;
			   margin-bottom: 2rpx;
		       display: flex;
		       background-color: #EFEFEF;
		       padding-left: 4rpx;
		       border-radius: 12rpx;
		     }
		   
		    /* 左侧区域*/
		    .left-side {
				margin-top: 24rpx;
				margin-left: 4rpx;
				width: 99rpx;
				height: 120rpx;
		        background-color: #1D6FFF;
		        padding-top: 40rpx;
			    padding-left: 46rpx;
				padding-bottom: 20rpx;
		       border-radius: 20rpx;
		       flex: 1;
		       margin-right: 10px;
		     }
		   
		    .amount {
				
		       font-size: 44rpx;
		       color: white;
		       font-weight: normal;
		     }
			 
			 .discount{
				 font-size: 60rpx;
				 color: white;
				 font-weight: normal;
			 }
		   
		    .condition {
		       font-size: 14px;
		       color: white;
		       margin-top: 10px;
		     }
		   
		     /* 右侧区域 */
		    .right-side {
		       flex: 2;
		       padding: 15px;
		     }
		   
		    .usage {
				margin-top: 26rpx;
			
		       font-size: 24rpx;
		       color: #333;
		       margin-bottom: 60rpx;
		     }
		   
		     .bottom-row {
				margin-left: 24rpx;
		       display: flex;
		       justify-content: space-between;
		       align-items: center;
		     }
		   
		    .expiry-date {
				
		       font-size: 22rpx;
		       color: #EA1703;
		     }
		   
		     /* 领取按钮 */
		    .receive-btn {
				width: 84rpx;
				height: 30rpx;
		       background-color: #0084FF;
		       color: white;
		       padding: 5px 5px;
		       border-radius: 8rpx;
		       display: flex;
		       align-items: center;
		       justify-content: center;
		       cursor: pointer;
		       font-size: 23rpx;
		     }
		   
		 

		   
</style>
